<template>
  <div class="footer">
    <span>
      <input type="checkbox" v-model="isCheckAll" />已完成{{count}}/全部{{todos.length}}
    </span>
    <button class="btn" @click="clearAllCheck">清除已完成任务</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue'
import { Todo } from '../types/todo'
export default defineComponent({
  props: {
    todos: {
      type: Array as ()=>Todo [],
      required: true
    },
    checkAll: {
      type: Function,
      required: true
    },
    clearAllCheck: {
      type: Function,
      required: true
    }
  },
  setup (props) {
    const count = computed(() => {
      return props.todos.reduce((pre, todo) => pre + (todo.isCheck ? 1 : 0), 0)
    })

    //  全选 和反选
    const isCheckAll = computed({
      get () {
        return count.value && props.todos.length === count.value
      },
      set (val) {
        props.checkAll(val)
      }
    })
    return {
      count,
      isCheckAll
    }
  }
})
</script>
<style  scoped>
.footer {
  display: flex;
  justify-content: space-between;
  line-height: 42px;
}
.btn {
  margin-top: 2px;
  margin-right: 2px;
  width: 120px;
  height: 28px;
  border: none;
  outline: none;
  background-color: red;
  color: #fff;
  border: none;
}
</style>
